@extends('layouts.'.getTheme())
@section('css')
<!-- <link href="{{asset(getThemeAssets('dataTables/datatables.min.css', true))}}" rel="stylesheet"> -->
<!-- <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main.css?v=1.0"/> -->
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<link href="{{asset(getThemeAssets('css/toastr.min.css'))}}" rel="stylesheet">
<style type="text/css">
	.timeline-item p{
        font-size: 15px;
    }
    .timeline-item i,small{
        font-size: 14px;
    }
    #tip {
        background-color: #ddf;
        color: #333;
        border: 1px solid silver;
        box-shadow: 3px 4px 3px 0px silver;
        position: absolute;
        margin-bottom: 20px;
        top: 10px;
        right: 20px;
        border-radius: 5px;
        overflow: hidden;
        line-height: 20px;
    }
    #tip input[type="text"] {
        height: 25px;
        border: 0;
        padding-left: 5px;
        width: 280px;
        border-radius: 3px;
        outline: none;
    }   
    .button-group {
        bottom: 0px;
    } 
    .weather{
            width: 60px;
            padding-left: 8px;
            display: inline-block;
    }
    #tip1{
        position：absolute;
        top: 80px;
        right: 10px;
    }
</style>
@endsection
@section('content')
<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-10">
        <h2>{!!trans('location.title')!!}</h2>
        <ol class="breadcrumb">
            <li>
                <a href="{{url('admin')}}">{!!trans('home.title')!!}</a>
            </li>
            <li class="active">
                <strong>{!!trans('location.subtitle')!!}</strong>
            </li>
        </ol>
    </div>
    <div class="col-lg-2">
        <div class="title-action">

        </div>
    </div>
</div>
<!-- ajax实时测点值信息获取 -->
<div class="wrapper wrapper-content">
    <div class="row animated">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>{!!trans('location.header')!!}</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="timeline.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li>
                                <a href="timeline.html#">Config option 1</a>
                            </li>
                            <li>
                                <a href="timeline.html#">Config option 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div id="container" style="width:100%; height:500px;"></div>
                    <div class="button-group">
                        <input type="button" class="button" value="占位" id="point" />
                        <input type="button" class="button" value="占位" id="line" />
                        <input type="button" class="button" value="占位" id="polygon" />
                        <input type="button" class="button" value="回到当前位置" onClick="javascript:toolBar.doLocation()">
                    </div>
                    <!-- <div id="tip1" style="line-height: 24px"></div>                     -->
                    <div id="tip">
                        <input type="text" id="keyword" name="keyword" value="请输入关键字：(选定后搜索)" onfocus='this.value=""' />
                    </div>
                </div>
            </div>
        </div>
        
    </div>
    
@endsection
@section('js')
  <!-- <script src="{{asset(getThemeAssets('plugins/jquery.dataTables.js', true))}}"></script> -->
  <!-- <script src="{{asset(getThemeAssets('dataTables/datatables.min.js', true))}}"></script> -->
  <script src="{{asset(getThemeAssets('layer/layer.js', true))}}"></script>
  <!-- 后来引进的js -->
    <script src="http://cache.amap.com/lbs/static/es5.min.js"></script>
  <script src="https://webapi.amap.com/maps?v=1.4.1&key=243a8c3b3fcaaaa27492a0249e6912e6"></script>
 <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
  <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
  <script src="{{asset(getThemeAssets('js/toastr.min.js'))}}"></script>
  <script>
    // 实例化地图对象
    var map = new AMap.Map('container', {
      // 地图风格
      mapStyle: 'amap://styles/fresh',
        resizeEnable: true,
        zoom:14,
        center: [120.567338, 31.895678]
    });
    // map.setFeatures(['point'])
    // map.setFeatures("building");
    // 设立marker标记
    // var location [][];
    // new info信息通知窗口
    var infoWindow = new AMap.InfoWindow();
    // 发起Ajax请求获取当前所有河流的信息，包含经纬度
    $.ajax({
        url: "{{url('/admin/coring/alltimeinfo')}}",
        data: {},
        type: 'GET',
        datatype: 'json',
        headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') },
        success: function(data) {
            // console.log(data);
            // 遍历每条河流json对象，生成marker以及弹窗信息

            for (var i=0,marker;i<data.length;i++) {
                // 基本信息获取
                var river_id = data[i].river_id;
                var river_name = data[i].river_name;
                var status = data[i].status;
                if (status == 1) {
                    status = '监测中';
                }else {
                    status = '未监测';
                }
                var extraplace = [data[i].nl,data[i].el];
                // console.log(extraplace);
                // new marker对象
                marker = new AMap.Marker({
                    position:extraplace,
                    map:map
                });
                //添加marker的内容
                marker.content = '河流编号：'+river_id +'<br>'
                                  + '河流名称：'+river_name + '<br>'
                                  + '监测状态：'+status + '<br>'
                                  + '<a href="{{url('admin/coring')}}" style="color:red; text-decoration:underline;">点击进入实时监测!</a>';
                // 添加marker click事件
                marker.on('click',markerClick);
                // console.log(extraplace);
            }
            setTimeout(function() {
                                toastr.options = {
                                    closeButton: true,
                                    progressBar: true,
                                    showMethod: 'slideDown',
                                    timeOut: 5000
                                };
                                toastr.info('点击蓝色标记查看河流的具体信息。'+ '<br>' +
                                    '当前用户管辖的河流数目为：'+data.length
                                         
                                    );

                                }, 500);
        }
    });
    // var lnglats=[//也可以使用LngLat对象
    //     [120.52744,31.89565],[120.57750,31.89569],
    //     [120.56731,31.89564],[120.59768,31.89566],
    //     [120.54731,31.88564]
    //     ];
    // var infoWindow = new AMap.InfoWindow();
    // for(var i = 0, marker; i < lnglats.length; i++){
    //     marker=new AMap.Marker({
    //         position:lnglats[i],
    //         map:map
    //     });
    //     marker.content='当前系统下，第' +i+'条河流：<br>'
    //                   +'<p style="color:red;">水位报警点个数：0</p>'
    //                   +'<a href="{{url('admin/coring')}}" style="color:red; text-decoration:underline;">进入水位实时监测界面。</a>'
    //                   ;
    //     //给Marker绑定单击事件
    //     marker.on('click', markerClick);
    // }

    // Click弹框
    function markerClick(e){
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
    }

    // 搜索框
      var windowsArr = [];
      var marker = [];
      AMap.plugin(['AMap.Autocomplete','AMap.PlaceSearch'],function(){
      var autoOptions = {
        city: "苏州", //城市，默认全国
        input: "keyword"//使用联想输入的input的id
      };
      autocomplete= new AMap.Autocomplete(autoOptions);
      var placeSearch = new AMap.PlaceSearch({
            city:'苏州',
            map:map
      })
      AMap.event.addListener(autocomplete, "select", function(e){
         //TODO 针对选中的poi实现自己的功能
         placeSearch.setCity(e.poi.adcode);
         placeSearch.search(e.poi.name)
      });
    });

    //地图中添加地图操作ToolBar插件
    var toolBar;
    var customMarker = new AMap.Marker({
        offset: new AMap.Pixel(-14, -34),//相对于基点的位置
        icon: new AMap.Icon({  //复杂图标
            size: new AMap.Size(27, 36),//图标大小
            image: "http://webapi.amap.com/images/custom_a_j.png", //大图地址
            imageOffset: new AMap.Pixel(-28, 0)//相对于大图的取图位置
        })
    });    
    map.plugin(["AMap.ToolBar"], function() {
        toolBar = new AMap.ToolBar({locationMarker: customMarker}); //设置地位标记为自定义标记
        map.addControl(toolBar);
    });

    map.setFitView();
    // 天气
    // AMap.service('AMap.Weather', function() {
    //     var weather = new AMap.Weather();
    //     //查询实时天气信息, 查询的城市到行政级别的城市，如朝阳区、杭州市
    //     weather.getLive('张家港市', function(err, data) {
    //         if (!err) {
    //             var str = [];
    //             str.push('<div style="color: #3366FF;">实时天气' + '</div>');
    //             str.push('<div>城市/区：' + data.city + '</div>');
    //             str.push('<div>天气：' + data.weather + '</div>');
    //             str.push('<div>温度：' + data.temperature + '℃</div>');
    //             str.push('<div>风向：' + data.windDirection + '</div>');
    //             str.push('<div>风力：' + data.windPower + ' 级</div>');
    //             str.push('<div>空气湿度：' + data.humidity + '</div>');
    //             str.push('<div>发布时间：' + data.reportTime + '</div>');
    //             var marker = new AMap.Marker({map: map, position: map.getCenter()});
    //             var infoWin = new AMap.InfoWindow({
    //                 content: str.join(''),
    //                 offset: new AMap.Pixel(0, -20)
    //             });
    //             infoWin.open(map, marker.getPosition());
    //             marker.on('mouseover', function() {
    //                 infoWin.open(map, marker.getPosition());
    //             });
    //         }
    //     });
        //未来4天天气预报
        // weather.getForecast('张家港市', function(err, data) {
        //     if (err) {return;}
        //     var str = [];
        //     for (var i = 0,dayWeather; i < data.forecasts.length; i++) {
        //         dayWeather = data.forecasts[i];
        //         str.push(dayWeather.date+' <div class="weather">'+dayWeather.dayWeather+'</div> '+ dayWeather.nightTemp + '~' + dayWeather.dayTemp + '℃');
        //     }
        //     document.getElementById('tip1').innerHTML = str.join('<br>');
        // });
    // });

  </script>
@endsection
